<!DOCTYPE html>
<html>
<title>MUSIC.club</title>
<?php 
require './common/top.php'

 ?>
<meta name="viewport" content="width=device-width, initial-scale=1">


<body>

<!-- !PAGE CONTENT! -->


<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
    height: 100%;
    color: #777;
    line-height: 1.8;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
    opacity: 0.7;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
    background-image: url("./image/bigbang.jpg");
    min-height: 100%;
}

/* Second image (Portfolio) */
.bgimg-2 {
    background-image: url("./image/xzq1.jpg");
    min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
    background-image: url("./image/IU1.jpg");
    min-height: 400px;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

#googleMap {
    width: 100%;
    height: 400px;
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%);
}

/* Turn off parallax scrolling for tablets and mobiles */


</style>
<body>

<div class="w3-content w3-container w3-padding-64">
  <h1 class="w3-center">MUSIC</h1>
  <p class="w3-center"><em>Enjoy the music together.</em></p>

</div>

<div class="bgimg-1 w3-display-container">
  <div class="w3-display-middle">
    <span class="w3-xxlarge w3-text-light-grey w3-wide">BIGBANG</span>
  </div>
</div>

<div class="w3-content w3-container w3-padding-64">
  <h3 class="w3-center">BIG BANG</h3>
  <p class="w3-center"><em>韩国男子组合<br> Bigbang不失章法的RAP，没有束缚的穿着，街头舞蹈，随意的台风，还有调动性强烈的歌词。宣传主V.I.P，没有新人的羞涩，歌词中不断重复出现的V.I.P.霸气地宣扬自己。衣服、项链上面都印着闪耀的BIGBANG，张扬得一塌糊涂</em></p><br>

  <!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) -->
  <div class="w3-row-padding w3-center">
  <table align="center" width="80%" border=0 class="table table-hover">
  <?php
   foreach ($data['musics'] as $row) {
    echo '<tr>';
    echo'<td>'.$row['song'].'</td>';
 echo '<td align="center"><audio src="upload/'.$row['url'].'" controls="controls"></td>'; 

  echo '</tr>';
  }
  ?>
  </table> 
  </div>
</div>

<!-- Second Parallax Image with Portfolio Text -->
<div class="bgimg-2 w3-display-container">
  <div class="w3-display-middle">
    <span class="w3-xxlarge w3-text-light-grey w3-wide">薛之谦</span>
  </div>
</div>

<!-- Container (Portfolio Section) -->
<div class="w3-content w3-container w3-padding-64">
  <h3 class="w3-center">薛之谦</h3>
  <p class="w3-center"><em>有态度，有效率，有节奏，有个性</em></p>

  <!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) -->
   <div class="w3-row-padding w3-center">
  <table align="center" width="80%" border=0 class="table table-hover">
  <?php
   foreach ($data['musics'] as $row) {
    echo '<tr>';
    echo'<td>'.$row['song'].'</td>';
 echo '<td align="center"><audio src="upload/'.$row['url'].'" controls="controls"></td>'; 
  echo '</tr>';
  }
  ?>
  </table> 
  </div>
</div>

<

<!-- Third Parallax Image with Portfolio Text -->
<div class="bgimg-3 w3-display-container">
  <div class="w3-display-middle">
     <span class="w3-xxlarge w3-text-light-grey w3-wide">IU</span>
  </div>
  </div>
    <div class="w3-content w3-container w3-padding-64">
        <h3 class="w3-center">IU</h3>
  <p class="w3-center"><em>有着自己的独有魅力，歌如其貌的甜美。</em></p>

    <div class="w3-row-padding w3-center">
  <table align="center" width="80%" border=0 class="table table-hover">
  <?php
   foreach ($data['musics'] as $row) {
    echo '<tr>';
    echo'<td>'.$row['song'].'</td>';
 echo '<td align="center"><audio src="upload/'.$row['url'].'" controls="controls"></td>'; 
  echo '</tr>';
  }
  ?>
  </table> 
  </div>
</div>


<!-- Container (Contact Section) -->


<footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">
  <p class="w3-medium">MADE BY NUTTER</p>
</footer> 
<!-- Add Google Maps -->

</body>
</html>